<template>
  <div class="p-6">
    <!-- 操作按钮 -->
    <div class="flex justify-end mb-6">
      <el-button type="primary" @click="handleAddCategory">
        <el-icon>
          <Plus />
        </el-icon>
        <span>新增分类</span>
      </el-button>
    </div>

    <!-- 分类列表 -->
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
      <div v-for="category in categories" :key="category.id"
        class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 transition-all hover:shadow-md">
        <div class="text-center mb-4">
          <div class="text-lg font-medium text-gray-800">{{ category.categoryName }}</div>
          <div class="text-sm text-gray-500 mt-1">{{ category.categoryDesc }}</div>
        </div>
        <div class="flex justify-center gap-2 mt-4">
          <el-button size="small" type="primary" @click="handleEditCategory(category)">
            <el-icon>
              <Edit />
            </el-icon>
            <span>编辑</span>
          </el-button>
          <el-popconfirm class="box-item" title="确认删除该分类吗？" placement="bottom"
            @confirm="deleteCate(category.categoryId)">
            <template #reference>
              <el-button size="small" type="danger">
                <el-icon>
                  <Delete />
                </el-icon>
                <span>删除</span>
              </el-button>
            </template>
          </el-popconfirm>
        </div>
      </div>
    </div>

    <!-- 新增/编辑分类对话框 -->
    <el-dialog :title="dialogType === 'add' ? '新增分类' : '编辑分类'" v-model="dialogVisible" width="30%" align-center>
      <template #default>
        <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px">
          <el-form-item label="分类名称" prop="name">
            <el-input placeholder="请输入分类名称" v-model="formData.categoryName" />
          </el-form-item>
          <el-form-item label="分类描述" prop="description">
            <el-input type="textarea" :rows="3" placeholder="请输入分类描述" v-model="formData.categoryDesc" />
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <div class="flex justify-end gap-2 px-4 pb-4">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" :loading="submitLoading" @click="confirm">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { deleteCategoryAPI, getCategoryAPI, newCategoryAPI, updateCategoryAPI } from '@/apis/category';
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';

const dialogVisible = ref(false)
const dialogType = ref('add'); // 'add' 或 'edit'

const categories = ref([]);

const formData = reactive({
  categoryId: '',
  categoryName: '',
  categoryDesc: ''
})

// 新增分类
const handleAddCategory = () => {
  dialogType.value = 'add';
  dialogVisible.value = true;
  formData.categoryId = ''
  formData.categoryName = ''
  formData.categoryDesc = ''
};
// 编辑分类
const handleEditCategory = (category) => {
  dialogType.value = 'edit';
  dialogVisible.value = true;
  formData.categoryId = category.categoryId
  formData.categoryName = category.categoryName
  formData.categoryDesc = category.categoryDesc
};
const confirm = async () => {
  if (!formData.categoryId) {
    try {
      let res = await newCategoryAPI(formData)
      ElMessage.success('新增成功');
      getCate()
      dialogVisible.value = false;
    } catch (error) {
      ElMessage.error('新增失败');
      dialogVisible.value = false;
    }
  } else {
    try {
      let res = await updateCategoryAPI(formData)
      ElMessage.success('修改成功');
      getCate()
      dialogVisible.value = false;
    } catch (error) {
      ElMessage.success('修改失败');
      dialogVisible.value = false;
    }
  }
}
const getCate = async () => {
  try {
    let res = await getCategoryAPI()
    console.log(res.data);
    categories.value = res.data
  } catch (error) {
    ElMessage.error('获取数据失败');
  }
}

const deleteCate = async (id) => {
  try {
    let res = await deleteCategoryAPI(id)
    ElMessage.success('删除成功');
    getCate()
  } catch (error) {
    ElMessage.error('删除数据失败');
  }
}
onMounted(() => {
  getCate()

})
</script>

<style scoped>
/*  分类卡片样式 */
.category-card {
  transition: all 0.3s;
}

.category-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
</style>